<template>
  <div>
    <homeheader></homeheader>
    <homeswiper :swiperList="swiperList"></homeswiper>
    <homeicons :iconList="iconList"></homeicons>
    <div class="bg"></div>
    <homerecommend :recommendList="recommendList"></homerecommend>
    <homeweekend :weekendList="weekendList"></homeweekend>
  </div>
</template>

<script>
  import Header from './components/Header'
  import Swiper from './components/Swiper'
  import Icons from './components/Icons'
  import Recommend from './components/Recommend'
  import Weekend from './components/Weekend'
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    name: "Home",
    data() {
      return {
        lastcity: '',
        swiperList: [],
        iconList: [],
        recommendList: [],
        weekendList: []
      }
    },
    components: {
      'homeheader': Header,
      'homeswiper': Swiper,
      'homeicons': Icons,
      'homerecommend': Recommend,
      'homeweekend': Weekend
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getjsonData() {
        axios.get('/api/index.json?city=' + this.city).then((res) => {
          const data = res.data.data
          if (data) {
            this.swiperList = data.swiperList;
            this.iconList = data.iconList;
            this.recommendList = data.recommendList;
            this.weekendList = data.weekendList;
          }
        })
      }
    },
    mounted() {
      this.getjsonData();
      this.lastcity = this.city;
    },
    activated() {
      console.log('activated');
      if (this.lastcity !== this.city) {
        this.lastcity = this.city;
        this.getjsonData();
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .bg {
    background: #f5f5f5
    height .2rem
  }
</style>
